<script setup>
//import axios from 'axios'
//import { ref } from 'vue'
import { ref, watch } from 'vue'
import { fetch7DayData } from '../api/weatherAPI'
import { initTemperatureChangeChart } from '../util/echarts'
const chartDom = ref(null)
//引入dayjs日期库
import dayjs from 'dayjs'

//声明一个变量获取未来三天的天气数据，此数组有7个，是数组
//表示此数据是空数组,用来存放api中返回的未来24小时天气数据

//声明两个变量分别存放预报时间和温度

const fxDates = ref([]) //存放未来7天的预报时间
const maxTemps = ref([])
const minTemps = ref([]) //存放未来7天的温度
const updateTime = ref('')
//调用网络请求的函数
//引用状态管理
import { useCityStore } from '../stores/cityStore'
//获取store实例
const cityStore = useCityStore()

//添加侦听器：监听状态管理中Location状态的变化
watch(
  //监听的数据源
  () => cityStore.location,
  //回调函数，当数据源有变化时需要做的事情
  () => {
    getData(cityStore.location.id)
  },
  //即使回调，初始状态执行一次回调函数
  { immediate: true }
)

// getData(cityStore.location.id)

async function getData(locationID) {
  const res = await fetch7DayData(locationID) //调用api模块化封装的函数
  // console.log(res)
  updateTime.value = dayjs(res.updateTime).format('YYYY年MM月DD日 HH时mm分')

  fxDates.value = []
  maxTemps.value = []
  minTemps.value = []

  res.daily.forEach((element) => {
    fxDates.value.push(element.fxDate) //预报时间
    maxTemps.value.push(element.tempMax)
    minTemps.value.push(element.tempMin) //温度
  })
  //调用图表函数
  initTemperatureChangeChart(
    chartDom.value,
    fxDates.value.map((x) => dayjs(x).format('DD')),
    minTemps.value,
    maxTemps.value
  )
}

//封装一个函数，实现echarts图表的功能
//vue3中获取dom元素的方式,此为第一步，声明一个引用
</script>


<template>
  <h3>未来7天天气预报</h3>
  <div class="update">
    <span>最后更新时间:{{ updateTime }}</span>
  </div>
  <div id="main" ref="chartDom"></div>
</template>

<style scoped>
#main {
  width: 100%;
  height: 400px;
}
h3 {
  text-align: center;
}
.update {
  text-align: center;
}
</style>